<template>
  <section class="order-list">
    <div class="inner">
      <div class="tabs-content">
        <div class="title">
          <ul>
            <li>订单信息</li>
            <li>预约价格</li>
            <li>支付金额</li>
            <li>
              <Dropdown  @on-click="select">
                <a href="javascript:void(0)">
                  状态
                  <Icon type="ios-arrow-down"></Icon>
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem name="0">全部</DropdownItem>
                  <DropdownItem name="1">待付款</DropdownItem>
                  <DropdownItem name="5">待消费</DropdownItem>
                  <DropdownItem name="6">待评价</DropdownItem>
                  <DropdownItem name="3">退款中</DropdownItem>
                  <DropdownItem name="4">已退款</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </li>
            <li>操作</li>
          </ul>
        </div>
        <div class="order-list1">
          <order-item :listinfo="i" v-for="i in list" :key="i.id" :status="2" :width="20"></order-item>
        </div>
        <div class="page-container">
          <Page :total="num" @on-change="pab" />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import OrderItem from '../../../components/ListItem/OrderItem'
export default {
  name: 'OrderList',
  components: {
      OrderItem
  },
   data () {
      return {
        selected: 0,
        list: [],
          page:1,
          num:0
      }
   },
    created () {
      this.getinfo()
    },
    methods: {
        pab (page) {
            this.page = page
            this.getinfo()
        },
        select (name) {
            this.selected = name
            this.getinfo()
        },
      getinfo() {
          let _this = this
          _this.$post('/api/shop/getProjectOrder',
              {
                  token:_this.$token,
                  status:_this.selected,
                  page:_this.page,
                  num:10
              },function (res) {
               console.log(res.data)
                _this.list = res.data
                  _this.num = parseInt(res.data.length)
                 _this.list.forEach(function (i) {
                     _this.$set(i,'type',1);
                     if(i.status == 1){
                         _this.$set(i,'text','待付款');
                     }else if(i.status == 5){
                         _this.$set(i,'text','待消费');
                     }else if(i.status == 6){
                         _this.$set(i,'text','待评价');
                     }else if(i.status == 3){
                         _this.$set(i,'text','退款中');
                     }else if(i.status == 4){
                         _this.$set(i,'text','退款成功');
                     }else {
                         _this.$set(i,'text','');
                     }
                 })
              },function (err,errmsg,errcode) {
                  _this.$message.error(errmsg);

              }
          )
      }
    }
}
</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .order-list {
    .inner {
      border: 1px solid @border-color;
      .tab {
        border: 1px solid @border-color;
        border-bottom: 0;
        background-color: #f5f5f5;
        &:after {
          display: block;
          clear: both;
          content: "";
          visibility: hidden;
          height: 0;
        }
        .tab-item {
          float: left;
          width: 25%;
          height: 43px;
          line-height: 43px;
          text-align: center;
          color: #666;
          background-color: #f5f5f5;
          border-right: 1px solid @border-color;
          border-bottom: 1px solid @border-color;
          position: relative;
          cursor: pointer;
          &:last-child {
            border-right-color: transparent;
          }
        }
        .tab-item.active {
          border-bottom-color: transparent;
          background-color: #fff;
          color: @theme-color;
          &:before {
            content: '';
            width: 100%;
            height: 3px;
            background-color: @theme-color-dark;
            position: absolute;
            top: -1px;
            left: 0;
          }
        }
      }
      .tabs-content {
        .page-container {
          padding: 20px 0;
          text-align: center;
        }
        .order-list1{
          padding: 10px;
        }
        >.title{
          width: 100%;
          height: 43px;
          background-color: #f5f5f5;
          border-bottom: solid 1px #e0e0e0;
          border-top: 2px solid @theme-color-dark;
          >ul{
            >li{
              float: left;
              line-height: 43px;
              text-align: center;
              font-size: 12px;
              color: #666666;
              width: 15%;
              a{
                color:#666666 ;
              }
            }
            >:first-child{
              width: 40%;
            }
            /*>:nth-child(3){*/
              /*width: 18%;*/
            /*}*/
          }
        }
      }
    }
  }
</style>
